<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onClose" @onConfirm="commit">
        <template v-slot:content>
            <el-form :model="addModel" ref="addFormRef" :rules="rules" label-width="70px" :inline="false"
                size="default">
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="name" label="姓名">
                            <el-input v-model="addModel.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="sex" label="性别">
                            <el-radio-group v-model="addModel.sex">
                                <!-- 单引号不能少 -->
                                <el-radio :value="'0'">男</el-radio>
                                <el-radio :value="'1'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="phone" label="电话">
                            <el-input v-model="addModel.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="邮箱">
                            <el-input v-model="addModel.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="userName" label="账户">
                            <el-input v-model="addModel.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="password" label="密码">
                            <el-input type="password" v-model="addModel.password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </template>
    </SysDialog>
</template>

<script setup lang="ts">

import SysDialog from '@/components/SysDialog.vue'
import useDialog from '@/hooks/useDialog';
import { nextTick, reactive, ref } from 'vue';
import { UserModel } from '@/api/user/UserModel';
import { ElMessage, FormInstance } from 'element-plus';
import { addUserApi, editUserApi, getListApi } from '@/api/user';
import { EditType, Title } from '@/type/BaseType';
const { dialog, onClose, onConfirm, onShow } = useDialog()    //弹框属性
const show = (type: string, row?: UserModel) => {//显示弹窗
    //设置弹框的标题
    type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
    dialog.height = 200
    dialog.visible = true
    //传递了row，说明是编辑
    //编辑回显数据
    if (row) {
        nextTick(() => {
            Object.assign(addModel, row)
            console.log('addModel:', addModel);
        })
    }
    
    //清空表单
    addFormRef.value?.resetFields()
    //设置本次操作是新增还是编辑
    addModel.type = type;
    

};
//defineExpose：把当前组件的方法 暴露给父组件调用
defineExpose({
    show
})
//表单绑定的对象
const addModel = reactive<UserModel>({
    userId: '',
    userName: '',
    password: '',
    phone: '',
    email: '',
    sex: '',
    name: '',
    type: ''
})
//表单的ref属性 获取到表单的一些属性
const addFormRef = ref<FormInstance>()
//表单的验证规则
const rules = reactive({
    name: [
        {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
        }
    ],
    userName: [
        {
            required: true,
            message: "请输入账户",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur"
        }
    ],
    phone: [
        {
            required: true,
            message: "请输入电话",
            trigger: "blur"
        }
    ],
    sex: [
        {
            required: true,
            message: "请输入性别",
            trigger: "blur"
        }
    ],
})
//注册事件
const emists =defineEmits(['onFresh'])  //子组件调用父组件

//表单提交
const commit = () => {
    addFormRef.value?.validate(async (valid) => {
        if (valid) {
            let res = null;
            if (addModel.type == EditType.ADD) {
                res = await addUserApi(addModel);
            } else {
                res = await editUserApi(addModel);
            }
            console.log(res)
            if (res && res.code == 200) {
                ElMessage.success(res.msg)
                emists('onFresh')
                onClose()
            }
        }
    })
}
</script>

<style scoped></style>